---
import type { CollectionEntry } from 'astro:content'

import BaseLayout from './BaseLayout.astro'
import FormattedDate from '../components/FormattedDate.astro'

type Props = CollectionEntry<'page'>['data']

const { description, pubDate, title, updatedDate } = Astro.props
---

<BaseLayout description={description} title={title}>
  <main class="mx-auto max-w-7xl px-4 py-8">
    <article class="prose mx-auto">
      <h1>{title}</h1>

      <p class="flex items-center gap-2">
        <span>
          Published: <FormattedDate date={pubDate} />
        </span>

        <span>/</span>

        {
          updatedDate && (
            <span>
              Updated: <FormattedDate date={updatedDate} />
            </span>
          )
        }
      </p>

      <slot />
    </article>
  </main>
</BaseLayout>
